- Special Edition Using Visual Basic Script -

CHAPTER 6 - Creating an HTML Layout Page

by Ibrahim Malluf

• Rules and benefits of 2-D layouts
• This ncludes excerpts of a White Paper presented by Microsoft,
• Creating and populating layouts by using the ActiveX Control Pad
• You will see how to design and place your layout.
• Code management
• You learn to use the Script Wizard to mange your code development.
• Creating a project called the Navigator
• This is a project that creates a Layout Control based drop-in-place navigational tool.

In Chapter 3, "Introducing the ActiveX Control Pad," we talked about the mechanics of the ActiveX Control Pad and its features. The Layout control was introduced along with an example Layout Control project that demonstrated the ActiveX Chart control. Here I present a little more detail Onthe Layout control. The Layout control will be distributed as part of the Internet Explorer 3.0 release version. It is an ActiveX Control that can be distributed to any browser that supports ActiveX controls. In the case of Netscape, ActiveX is not directly supported, but there is at least one add-on available that gives Netscape ActiveX compatibility, and thus Layout Control capability.The ActiveX Layout control gives you full two-dimensional layout capability for your Web pages. Within this control's area, you can place items wherever you desire using pixel granularity. It should be mentioned here that the Layout control is envisioned by Microsoft as an interim application of a preliminary specification approved by the World Wide Web Consortium(W3C). This new specification will include HTML extensions that will radically extend layout capabilities within your documents. For now though, the Layout Control is the tool for providing 2D layout in HTML pages. As currently implemented, the Layout Control requires that you place your 2D layout information in a separate file with an .ALX extension. This file is a text file that contains the layout information formatted in the W3C's preliminary syntax.

In this chapter you learn about the benefits of true 2-dimensional layout and design capabilities provided by the Layout control. You also see how to use the Script Wizard to manage VBScript development within this Layout Control. Finally, there is an application project that provides an example of using the Layout control and how to work around some of its limitaions.

Preliminary 2-D Layout Rules and Benefits

• 2-D regions must be defined in a separate file. This file must be given an .ALX extension and is defined as part of the HTML Layout control object tag within the HTML stream. (Please note that after the W3C 2D-layout specification is finalized, Microsoft will support 2-D-style layout definitions directly within the HTML document, rather than in a separate file.)
• Objects defined within the 2-D region must be ActiveX-compliant objects.
• The 2-D region must be enclosed within <DIV> tags as follows: <DIV STYLE="LAYOUT:FIXED; HEIGHT value WIDTH value">...</DIV>

According to Microsoft, they are committed to supporting the final specification natively within the Microsoft Internet Explorer after the W3C standard is formalized. Microsoft also says that they will ensure that the HTML Layout Control format is compatible with future 2-D layout support, which will be incorporated directly into future releases of the Microsoft Internet Explorer. The advantages of this new specification include the following:

• Exact 2-D placement: Controls are placed exactly where the author intended them to be placed within the 2-D region.
• Overlapping regions: The author can also specify the exact z-order of each control on the page.
• Transparency: Graphics, labels, and other controls that support transparency can be placed over each other, giving an attractive layered look.
• Scripting: The HTML Layout control also fully supports scripting, including both Visual Basic Scripting Edition (VBScript) and JavaScript.

Creating and Populating the Layout

To use a Layout Control in your Web page document, you need to declare it as you would any other ActiveX control. Listing 6.1 shows a sample declaration of an ActiveX Layout control in a Web page document.

Listing 6.1 CHAPT6_01.HTMùSample Declaration of an ActiveX Layout Control in a Web Page

Within the ALX file itself you will also find plain text describing the different items to be contained within the Layout control. All of the ActiveX controls that you place within a Layout control have their object declarations placed with a set of <DIV>...</DIV> tags. Listing 6.2 illustrates the code required to place a TabStrip control within an ActiveX Layout control.

Listing 6.2 NAVIGATOR.ALXùThe 2-D Layout Code within an ALX File Specifying a TabStrip Control's Placement

Parts of a Layout Control Page

The <DIV> tag syntax is :

<DIV [ID=name] STYLE = "layout-style-attributes">

object-blocks

</DIV>

The ID part of the tag is an optional attribute that specifies the name given to that particular Layout control and is used by scripting to identify it. The style tag specifies the style attributes for a given Layout Control and are defined in Table 6.1.

Table 6.1 Style Attributes for <DIV> Tag

You can include any ActiveX control within your ALX file. This includes but is not limited to controls that implement the ActiveX Control '96 specification for windowless, transparent controls. One thing I should note however is that some ActiveX controls will require a developer's license for you to include and distribute them through your Web documents. The beta version of Internet Explorer that I am working with right now does not have the licensing mechanism in place and will not show any controls that require a license. This should be corrected by the time you are reading this book.

One thing I should note, however, is that some ActiveX controls, you will have to have require a developer's license for you to include and distribute them through your Web documents. The beta version of Internet Explorer that I am working with right now does not have the licensing mechanism in place and does not indicate which controls require a license. This should be corrected by the time you are reading this book.

How to Start a New Project

Fortunately, you do not have to hand edit these ALX files. You can produce them through the ActiveX Control Pad described in Chapter 3, "Introducing the ActiveX Control Pad." To create a new Layout control, you need merely select the New Layout Control from the Files menu of the ActiveX control menu as shown in Figure 6.1. This brings up a new ActiveX Layout control that is ready for your editing.

FIG. 6.1

Select a New HTML Layout control from the menu of the ActiveX Control Pad.

Let us create a navigator tool that can act as a drop-in-place navigational object that is fully modifiable based on a given page context. The idea being presented here uses a Layout control that contains a TabStrip control and an ieLabel control. The number of displayed tabs will differ depending upon the modifications made by external sources such as the parent Web page, or even a Web page in another frame.

First we'll begin by create the new Layout Control, adding a tab control and ieLabel control, and arrange them as shown in Figure 6.2. The TabStrip is named tabNavigator, and the label is simply named ieLabel. The TabStrip's TabOrientation property is set to left, and the ielabel's angle property is set to 90 degrees. Finally, add a ieTimer control that will drive some animation effects to be added later. Save the control with the name of Navigator.alx.

FIG. 6.2

Begin the Navigator Demo project within the ActiveX Control Pad.

So altogether there are three controls on the Layout Pad. The ieLabel control in this beta version of the ActiveX Control Pad would not permit changing the FontName property from the Properties Edit Window. This is a bug that might or might not get fixed before you get an opportunity to read this book. The workaround for this and many similar problems is to directly edit the properties using the 'View Source Code' selection from the right button click's pop-up menu. This produces a NotePad-based edit window that enables you to do direct editing. Listing 6.3 shows the HTML code as presented by the View Source Code menu selection. Note that I changed the ieLabel's FontName to Brush Script MT.

Listing 6.3 NAVIGATOR.ALXùThe Navigator's <DIV> Code Section in the ALX File with the Modified FontName Property of ieLabel

So if you are working with an ActiveX control that is giving you trouble modifying a property value, you can try using the text editor to manually modify that value. One thing I should warn you about, some properties that are not recognized, or other text like comments that are manually typed in by you between the <DIV> and </DIV> tags will be removed by the ActiveX Control Pad the next time it reads in the ALX file.

Code Management

The Script Wizard gives you very good control over the editing environment within a Layout control. All of the event code for your controls can be written through the Script Wizard using the Select Event and Insert Actions tree views. You can even add non-event procedures and Global variables through the Script Wizard as well.

Figure 6.3 shows the pop-up menu that appears when right-clicking the Procedures node in the Insert Actions tree view. When selecting a New Procedure from this menu, the Script Wizard opens a Code window to that procedure with the default name of Sub Procedure1In this situation a Function is desired instead of a sub procedure. Left-click the mouse button into the area where the procedure name is and edit the text there to say "Function NewColor." This function will be used to return a number representing a randomly generated color. It will be called by the ieTimer_timer event to provide a little bit of animation.

FIG. 6.3

Add code to the Change event of the tabNavigator tabstrip.

To add functionality to a control's event procedure, just select the correct event from a control node in the Select Event window of the Script Wizard. Figure 6.4 shows the tabNavigator_Change event selected and the appropriate code being added to the event.

FIG. 6.4

Edit the code in a Procedure through the Script Wizard.

Let's get down to the code required to build this drop-in-place navigator tool. Listing 6.4 includes three event procedures and one utility procedure. The utility procedure is a function that returns a randomly generated number. The ieTimer_Timer event calls a function that randomly generates a new number for the ieBanner label's text. The tabNavigator_Change event calls a ChangedTab procedure in the parent document.

Listing 6.4 NAVIGATOR.ALXùThe VBScript Code within the HTML Layout Control for the Events and Methods of the Navigator.ALX Demo

The Navigator_OnLoad event contains special code to deal with some vagaries of the relationship between a parent document and the ALX file. There are some very tricky timing issues involved with the Layout Control and the parent document's VBScript. In the case of this Navigator project I wanted to be able to have the parent document determine how many tabs would be needed, what those tabs' titles would be, and finally what would happen when those tabs where selected.

The problem here had to do with the way the VBScript would be parsed by Explorer. In order to have the parent document's VBScript recognize the Navigator Layout control I had to use the OnLoad ="InitALX" event in the VBScript of the parent document. This will cause the Navigator to get loaded before the VBScript is parsed thus avoiding parsing errors when the parser came upon references to the navigator. The caveat here was that none of the Parent Document's VBScript code could be run outside of a procedure or a parser error would occur anyway. So I had to have a way to invoke the parent document's VBScript code that would populate the tabstrip with data. The Navigator's OnLoad event did the trick. Since the ALX code apparently gets parsed while loading, and this particular event wouldn't occur until the Navigator was loaded all the timing issues of the parser were resolved.

The OnLoad event of the Navigator called back to the parent document's VBSCript procedure that loaded the tabstrip with the data. This problem is purely an initialization problem. Once the parent document has completed loading, the Navigator's data can be manipulated from other frames as needed.

Saving and Running

The Navigator Demo created here has a set of requirements in order to run. They are:

• A Hidden Control named MyTabs that specifies the initial number of tabs to display
• A Subroutine named 'NameTabs()' that provides the Tab names and related URLS
• A Subroutine named 'ChangedTab(MyTab)' that takes a numeric argument and acts upon the tab number provided to it by the Navigator
• The Navigator Demo must reside in Frame 1 of a three frame project.

You can modify the Navigator to have different requirements depending upon your needs but as it is presented here these are the things it needs to work To build and test your Layout Controls you need to have one or more Web page documents to create the environment needed for your layout control project. In my case here I needed three documents:

• Chapt6_00.htm: The document that creates the three frames
• MyBanner.htm: The document that creates a title at the top of the window
• Chapt6_01.htm: The document that contains the Navigator and related code

The code for Chapt6_00.htm includes the definition of three frames that have no borders and are not sizable. Listing 6.5 shows the code for this page. You won't find any rocket science there.

Listing 6.5 CHAPT6_00.HTMùThe Layout HTML for the Required Frames

The next page is the MyBanner.htm. While not exactly relevant to the topic of this chapter I am including it to show some of the things you can do with VBScript. Listing 6.6 provides the code.

Listing 6.6 MYBANNER.HTMùA Fancy Banner to Fill Frame 0 in the Navigator Demo

And now we come to the actual page that contains the navigator. The first part of this page contains the page's layout information including the required hidden control mentioned above and the object declaration for the layout control. This is all in Listing 6.7.

Listing 6.7 CHAPT6_01.HTMùThe Layout HTML code for the Navigator Page

As you can see, the Layout Control is declared like any other ActiveX object. The remaining code is VBScript Code that directly works with the Navigator Layout Control. The first procedure loads the navigator's TabStrip with titles for the tabs and puts a URL into the corresponding tab's ControlTipText property. Listing 6.8 shows that procedure.

Listing 6.8 CHAPT6_01.HTMùThe Procedures for Setting Up and Responding to the Navigator Layout Control

With all of this in place, you can load the Chapt6_00.htm and start out with the window shown in Figure 6.5.

FIG. 6.5

Here's the Navigator Layout control in action.

By clicking any of the tabs of the Navigator control you can cause the indicated Web page to be loaded into the main window of the frameset. Customizing this navigator during runtime is accomplished through the modification of the value in the MyTabs hidden value and the values in the NameTabs Sub procedure to match your location titles and URLs.

From Here...

Try experimenting with the Navigator concept such as having pages that are loaded into the main frame dynamically change the Navigator's tabs and locations data.

• For more information on developing with the Layout Control using the ActiveX control Pad see Chapter 3, "Introducing the ActiveX Control Pad."